<template>
  <!-- #ifdef H5 -->
  <th :rowspan="rowspan" :colspan="colspan" class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }">
    <view class="uni-table-th-row">
      <view class="uni-table-th-content" :style="{ 'justify-content': contentAlign }" @click="sort">
        <slot></slot>
        <view v-if="sortable" class="arrow-box">
          <text class="arrow up" :class="{ active: ascending }" @click.stop="ascendingFn"></text>
          <text class="arrow down" :class="{ active: descending }" @click.stop="descendingFn"></text>
        </view>
      </view>
      <dropdown v-if="filterType || filterData.length" :filterDefaultValue="filterDefaultValue" :filterData="filterData" :filterType="filterType" @change="ondropdown"></dropdown>
    </view>
  </th>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <view class="uni-table-th" :class="{ 'table--border': border }" :style="{ width: customWidth + 'px', 'text-align': align }"><slot></slot></view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  import dropdown from './filter-dropdown.vue'
  // #endif
  /**
   * Th 表头
   * @description 表格内的表头单元格组件
   * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
   * @property {Number | String} 	width 	单元格宽度（支持纯数字、携带单位px或rpx）
   * @property {Boolean} 	sortable 					是否启用排序
   * @property {Number} 	align = [left|center|right]	单元格对齐方式
   * @value left   	单元格文字左侧对齐
   * @value center	单元格文字居中
   * @value right		单元格文字右侧对齐
   * @property {Array}	filterData 筛选数据
   * @property {String}	filterType	[search|select] 筛选类型
   * @value search	关键字搜素
   * @value select	条件选择
   * @event {Function} sort-change 排序触发事件
   */
  export default {
    name: 'uniTh',
    options: {
      // #ifdef MP-TOUTIAO
      virtualHost: false,
      // #endif
      // #ifndef MP-TOUTIAO
      virtualHost: true
      // #endif
    },
    components: {
      // #ifdef H5
      dropdown
      // #endif
    },
    emits: ['sort-change', 'filter-change'],
    props: {
      width: {
        type: [String, Number],
        default: ''
      },
      align: {
        type: String,
        default: 'left'
      },
      rowspan: {
        type: [Number, String],
        default: 1
      },
      colspan: {
        type: [Number, String],
        default: 1
      },
      sortable: {
        type: Boolean,
        default: false
      },
      filterType: {
        type: String,
        default: ''
      },
      filterData: {
        type: Array,
        default() {
          return []
        }
      },
      filterDefaultValue: {
        type: [Array, String],
        default() {
          return ''
        }
      }
    },
    data() {
      return {
        border: false,
        ascending: false,
        descending: false
      }
    },
    computed: {
      // 根据props中的width属性 自动匹配当前th的宽度(px)
      customWidth() {
        if (typeof this.width === 'number') {
          return this.width
        } else if (typeof this.width === 'string') {
          let regexHaveUnitPx = new RegExp(/^[1-9][0-9]*px$/g)
          let regexHaveUnitRpx = new RegExp(/^[1-9][0-9]*rpx$/g)
          let regexHaveNotUnit = new RegExp(/^[1-9][0-9]*$/g)
          if (this.width.match(regexHaveUnitPx) !== null) {
            // 携带了 px
            return this.width.replace('px', '')
          } else if (this.width.match(regexHaveUnitRpx) !== null) {
            // 携带了 rpx
            let numberRpx = Number(this.width.replace('rpx', ''))
            // #ifdef MP-WEIXIN
            let widthCoe = uni.getWindowInfo().screenWidth / 750
            // #endif
            // #ifndef MP-WEIXIN
            let widthCoe = uni.getSystemInfoSync().screenWidth / 750
            // #endif
            return Math.round(numberRpx * widthCoe)
          } else if (this.width.match(regexHaveNotUnit) !== null) {
            // 未携带 rpx或px 的纯数字 String
            return this.width
          } else {
            // 不符合格式
            return ''
          }
        } else {
          return ''
        }
      },
      contentAlign() {
        let align = 'left'
        switch (this.align) {
          case 'left':
            align = 'flex-start'
            break
          case 'center':
            align = 'center'
            break
          case 'right':
            align = 'flex-end'
            break
        }
        return align
      }
    },
    created() {
      this.root = this.getTable('uniTable')
      this.rootTr = this.getTable('uniTr')
      this.rootTr.minWidthUpdate(this.customWidth ? this.customWidth : 140)
      this.border = this.root.border
      this.root.thChildren.push(this)
    },
    methods: {
      sort() {
        if (!this.sortable) return
        this.clearOther()
        if (!this.ascending && !this.descending) {
          this.ascending = true
          this.$emit('sort-change', { order: 'ascending' })
          return
        }
        if (this.ascending && !this.descending) {
          this.ascending = false
          this.descending = true
          this.$emit('sort-change', { order: 'descending' })
          return
        }

        if (!this.ascending && this.descending) {
          this.ascending = false
          this.descending = false
          this.$emit('sort-change', { order: null })
        }
      },
      ascendingFn() {
        this.clearOther()
        this.ascending = !this.ascending
        this.descending = false
        this.$emit('sort-change', { order: this.ascending ? 'ascending' : null })
      },
      descendingFn() {
        this.clearOther()
        this.descending = !this.descending
        this.ascending = false
        this.$emit('sort-change', { order: this.descending ? 'descending' : null })
      },
      clearOther() {
        this.root.thChildren.map((item) => {
          if (item !== this) {
            item.ascending = false
            item.descending = false
          }
          return item
        })
      },
      ondropdown(e) {
        this.$emit('filter-change', e)
      },
      /**
       * 获取父元素实例
       */
      getTable(name) {
        let parent = this.$parent
        let parentName = parent.$options.name
        while (parentName !== name) {
          parent = parent.$parent
          if (!parent) return false
          parentName = parent.$options.name
        }
        return parent
      }
    }
  }
</script>

<style lang="scss">
  $border-color: #ebeef5;
  $uni-primary: #007aff !default;

  .uni-table-th {
    padding: 12px 10px;
    /* #ifndef APP-NVUE */
    display: table-cell;
    box-sizing: border-box;
    /* #endif */
    font-size: 14px;

    color: #909399;
    border-bottom: 1px $border-color solid;
  }

  .uni-table-th-row {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .table--border {
    border-right: 1px $border-color solid;
  }
  .uni-table-th-content {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .arrow-box {
  }
  .arrow {
    display: block;
    position: relative;
    width: 10px;
    height: 8px;
    // border: 1px red solid;
    left: 5px;
    overflow: hidden;
    cursor: pointer;
  }
  .down {
    top: 3px;
    ::after {
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      left: 2px;
      top: -5px;
      transform: rotate(45deg);
      background-color: #ccc;
    }
    &.active {
      ::after {
        background-color: $uni-primary;
      }
    }
  }
  .up {
    ::after {
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      left: 2px;
      top: 5px;
      transform: rotate(45deg);
      background-color: #ccc;
    }
    &.active {
      ::after {
        background-color: $uni-primary;
      }
    }
  }
</style>
